<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一条咸鱼</title>
    <style>
        * {
            /*清除内外边距*/
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 1400px;
            /*设定版心居中对齐*/
            margin: 0 auto;
        }
        
        .box {
            position: relative;
            right: 10px;
        }
        
        button {
            z-index: 1;
            position: relative;
            font-size: inherit;
            font-family: inherit;
            color: white;
            padding: 0.5em 1em;
            outline: none;
            border: none;
            background-color: hsl(236, 32%, 26%);
        }
        
        button::before {
            content: '';
            z-index: -1;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #e07229;
            transform-origin: center bottom;
            transform: scaleY(0);
            transition: transform 0.25s ease-in-out;
        }
        
        button:hover {
            cursor: pointer;
        }
        
        button:hover::before {
            transform-origin: center top;
            transform: scaleY(1);
        }
        
        .box1 {
            position: fixed;
            top: 250px;
            left: 0px;
            z-index: 20;
        }
        
        .box1 a {
            color: white;
            text-decoration: none
        }
        
        .box3 {
            position: fixed;
            top: 350px;
            left: 0px;
            z-index: 20;
        }
        
        .box3 a {
            text-decoration: none;
            color: white;
        }
        
        .box2 {
            position: fixed;
            top: 300px;
            left: 0px;
            z-index: 20;
        }
        
        .box2 a {
            color: white;
            text-decoration: none;
        }
        
        .box4 {
            position: absolute;
            left: 270px;
            top: 900px;
            width: 400px;
            height: 400px;
            border-radius: 200px;
        }
        
        .box5 {
            position: absolute;
            left: 780px;
            top: 800px;
        }
        
        .box5 p {
            font-size: 40px;
        }
        
        .box5 h1 {
            font-size: 50px;
        }
        
        .box6 {
            width: 700px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 1000px;
            left: 700px;
        }
        
        .box6 p {
            font-weight: 1000;
            background-color: white;
            font-size: 25px;
        }
        
        .box7 {
            position: absolute;
            left: 100px;
            top: 500px;
            color: white;
            height: 600px;
        }
        
        span {
            position: relative;
        }
        
        span::before,
        span::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #d4a234;
            transform: scaleY(0);
            transition: transform 0.5s ease;
        }
        
        span::before {
            left: -8px;
            transform-origin: center top;
        }
        
        span:hover::before {
            transform-origin: center bottom;
            transform: scaleY(1);
        }
        
        span::after {
            right: -8px;
            transform-origin: center bottom;
        }
        
        span:hover::after {
            transform-origin: center top;
            transform: scaleY(1);
        }
        
        .box7 h1 {
            top: 10px;
            position: relative;
            font-size: 60px;
        }
        
        .box7 h2 {
            position: relative;
            font-size: 40px;
            padding-left: 100px;
            color: teal;
        }
        
        .box7 h3 {
            padding-left: 10px;
            font-size: 40px;
            color: white;
        }
        
        .box7 h4 {
            padding-left: 17px;
            font-size: 30px;
            color: black
        }
        
        .box7 h5 {
            padding-left: 60px;
            padding-bottom: 5px;
            font-size: 45px;
        }
        
        .box7 h6 {
            padding-top: 30px;
            font-size: 100px;
            color: rgb(81, 86, 95);
        }
        
        .box7 p {
            padding-top: 20px;
            padding-left: 20px;
            font-size: 40px;
        }
        
        .box8 {
            position: absolute;
            width: 1350px;
            height: 200px;
            color: white;
            background-color: black;
            left: 65px;
            border-radius: 10px;
            top: 1350px;
        }
        
        .box8 h1 {
            padding-left: 50px;
            padding-top: 10px;
        }
        
        .box8 h2 {
            padding-left: 25px;
        }
        
        .box8 p {
            padding-left: 50px;
            padding-top: 15px;
            font-size: 20px;
        }
        
        .box9 {
            background-color: black;
            border-radius: 50px;
            width: 1450px;
            height: 1300px;
            margin-top: 350px;
        }
        
        .box9 img {
            padding-left: 80px;
            padding-top: 100px;
            margin-left: 20px;
            margin-top: 20px;
        }
        
        .box9 img:hover {
            transform: scale(1.3);
            transition: 3s;
        }
        
        .banshisheji {
            position: absolute;
            margin: 50px auto 0 auto;
            border-radius: 10px;
            top: 1800px;
            left: 1150px;
            animation-name: banshisheji;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        
        .banshisheji:hover {
            animation-play-state: paused;
        }
        
        .banshisheji h1 {
            color: white;
        }
        
        button {
            z-index: 1;
            border-radius: 10px;
            font-size: inherit;
            font-family: inherit;
            color: white;
            padding: 0.5em 1em;
            outline: none;
            border: none;
            background-color: hsl(236, 32%, 26%);
        }
        
        button:hover {
            cursor: pointer;
            animation: jelly 0.5s;
        }
        
        @keyframes banshisheji {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-200px, 0);
            }
        }
        
        .box10 {
            background-color: black;
            color: white;
            top: 3000px;
            width: 1450px;
            height: 1300px;
            border-radius: 50px;
            margin-top: 90px;
        }
        
        .box10 img {
            margin-left: 133px;
            margin-top: 500px;
        }
        
        .box10 img:hover {
            transform: scale(1.2);
            transition: 3s;
        }
        
        .box11 {
            position: absolute;
            background-color: black;
            color: white;
            top: 4400px;
            width: 1450px;
            height: 1300px;
            border-radius: 50px;
            z-index: -9;
        }
        
        .box12 {
            position: absolute;
            top: 5500px;
            z-index: -20;
        }
        
        .yc {
            position: relative;
            padding-top: 900px;
            padding-left: 500px;
        }
        
        .sh {
            position: relative;
            margin-top: -1090px;
            margin-left: 650px;
            z-index: -8;
        }
        
        .sh2 {
            position: relative;
            margin-top: -700px;
            margin-left: 220px;
            z-index: -7;
        }
        
        .box13 {
            position: absolute;
            top: 6400px;
            color: white;
            left: 900px;
        }
        
        .box13 img {
            position: absolute;
            left: 300px;
            top: -70px;
        }
        
        .wenzi1 {
            position: absolute;
            top: 1900px;
            left: 960px;
            margin: 50px auto 0 auto;
            width: 500px;
            height: 500px;
        }
        
        .wenzi1 h1 {
            color: white;
            font-size: 50px;
        }
        
        .wenzi1 h2 {
            font-size: 35px;
            color: white;
            padding-top: 40px;
            padding-left: 105px;
        }
        
        .wenzi1 p {
            font-size: 20px;
            color: white;
            padding-top: 25px;
            position: relative;
            right: 35px;
        }
        
        .app {
            position: absolute;
            border-radius: 10px;
            top: 3050px;
            left: 750px;
            animation-name: app;
            animation-duration: 3.5s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        
        .app:hover {
            animation-play-state: paused;
        }
        
        @keyframes app {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-200px, 0);
            }
        }
        
        .appwz {
            position: absolute;
            color: white;
            bottom: 1900px;
            left: 620px;
            width: 500px;
            height: 500px;
        }
        
        .appwz h1 {
            font-size: 50px;
        }
        
        .appwz h2 {
            font-size: 35px;
            padding-top: 20px;
            padding-left: 80px;
        }
        
        .appwz p {
            font-size: 20px;
            padding-right: 90px;
        }
        
        .appjs {
            position: absolute;
            color: white;
            bottom: 2150px;
            width: 600px;
            left: 480px;
        }
        
        .appjs p {
            font-size: 20px;
        }
        
        .dongtu {
            position: relative;
            left: 1000px;
            top: 100px;
            z-index: -7;
        }
        
        .zuihou {
            position: absolute;
            border-radius: 10px;
            animation-name: zuihou;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            top: 4500px;
            left: 1300px;
        }
        
        @keyframes zuihou {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(0, 800px);
            }
        }
        
        .zuihou:hover {
            animation-play-state: paused;
        }
        
        .zuihouwz {
            position: absolute;
            color: white;
            font-size: 20px;
            left: 30px;
            top: 5600px;
        }
        
        .wula {
            position: absolute;
            width: 70px;
            height: 70px;
            border-radius: 35px;
            background-color: red;
            top: 525px;
            left: 635px;
            animation-name: wulala;
            animation-duration: 3.5s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        
        .wula a {
            color: white;
            padding-left: 4px;
            text-decoration: none;
            font-size: 20px;
            font-weight: 10px;
        }
        
        .wula:hover {
            animation-play-state: paused;
        }
        
        @keyframes wulala {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(0, 150px);
            }
            50% {
                transform: translate(650px, 150px);
            }
            75% {
                transform: translate(0, 150px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        .texiao {
            position: absolute;
            perspective: 120px;
            top: 10px;
            left: 9px;
        }
        
        .tx1 {
            width: 2em;
            height: 2em;
            border-radius: 50%;
            border: 8px solid white;
            animation: zhuan 1.5s ease-in-out infinite;
        }
        
        @keyframes zhuan {
            to {
                transform: rotateY(540deg);
            }
        }
        
        .texiao2 {
            position: absolute;
            perspective: 120px;
            top: 6420px;
            left: 25px;
        }
        
        .tx2 {
            width: 2em;
            height: 2em;
            border-radius: 50%;
            border: 18px solid black;
            animation: zhuan2 1.5s ease-in-out infinite;
        }
        
        @keyframes zhuan2 {
            to {
                transform: rotateY(540deg);
            }
        }
        
        .pao {
            position: absolute;
            top: 400px;
            left: 170px;
        }
        
        .zfx {
            position: absolute;
            top: 1050px;
            left: 1200px;
            width: 80px;
            height: 80px;
            background-color: black;
            margin: 100px auto;
            -webkit-animation: rotateplane 1.2s infinite ease-in-out;
            animation: rotateplane 1.2s infinite ease-in-out;
        }
        
        @-webkit-keyframes rotateplane {
            0% {
                -webkit-transform: perspective(120px);
            }
            50% {
                -webkit-transform: perspective(120px) rotateY(180deg);
            }
            100% {
                -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
            }
        }
        
        @keyframes rotateplane {
            0% {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            }
            50% {
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            }
            100% {
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }
        
        .cchu {
            position: absolute;
            bottom: -1000px;
            left: 550px;
        }
        
        .cchu p {
            color: rgb(128, 131, 125);
        }
    </style>





</head>

<body>
    <audio src="寒蝉.mp3" controls="controls" autoplay="autoplay" title="音乐"></audio>

    <div class="container">

        <div class="box">
            <img src="首页.jpg" width="1400px">


            <div class="box1">
                <button><a href="#geren">个人资料</a></button>
            </div>

            <div class="box2">
                <button><a href="#zuopingzhanshi">作品展示</a></button>

            </div>

            <div class="box3">
                <button> <a href="#lianxi">联系方式</a></button>

            </div>


            <div class="yuan">
                <img class="box4" src="头像.jpg" alt="" title="肖像">
            </div>

            <div class="box5">
                <h1 id="geren">About Me</h1>
                <p>个人信息</p>
            </div>


            <div class="box6">
                <p>姓名：赵崇贤</p>
                <p>年龄：20</p>
                <p>性别：男</p>
                <br>
                <P>学历：本科在读</P>
                <p>QQ：2500133459</p>
                <p>梦想：发财</p>
            </div>

            <div class="box7">
                <h1><span>天蝎座</span></h1>
                <br>
                <h2> <span>电影</span></h2>
                <br>
                <h3><span>JJALTOON</span></h3>
                <br>
                <h4><span>东野圭吾</span></h4>
                <br>
                <br>
                <h5><span>八爷</span></h5>
                <h6><span>猫</span></h6>
                <p><span>Design</span> </p>
            </div>
            <div class="box8">
                <h1>个人价值:</h1>
                <h2>Individual values</h2>
                <P>懂一些HTML,CSS,能完成简单的网页制作。会使用PS，AI等软件。同时具有一定的绘画能力。适应能力强，善于观察沟通，团队合作能力强。踏实认真，善良诚恳，喜欢独立思考，分析。是一个好人。</P>
            </div>
            <div class="box9">
                <img src="壶.png" alt="" width="300px" title="抠图设计">
                <img src="满版.png" alt="" width="300px" title="满版设计">
                <br>
                <img src="曲面.png" alt="" width="300px" title="曲面设计">
                <img src="三角.png" alt="" width="300px" title="三角设计">



            </div>

            <div class="banshisheji">
                <h1 id="zuopingzhanshi"><button>版式设计</button></h1>

            </div>

            <div class="box10">
                <img src="主界面1.jpg" alt="" width="280px" title="App设计">
                <img src="一级界面1.jpg" alt="" width="280px" title="App设计">
                <img src="二级界面1.jpg" alt="" width="280px" title="App设计">

            </div>

            <div class="box11">

            </div>


            <div class="yc">
                <img src="原创1.jpg" alt="" width="600px">

            </div>

            <div class="sh">
                <img src="手绘1.jpg" alt="" width="600px">

            </div>

            <div class="sh2">
                <img src="手绘2.jpg" alt="" width="500px">

            </div>



            <div class="box12">
                <img src="结尾.jpg" alt="" width="1450px">
            </div>


            <div class="box13"> <img src="微信图片.jpg" alt="" width="150px" title="微信">
                <h1 id="lianxi">联系方式</h1>
                <p>电话：18054742513</p>
                <P>邮箱：2500133459@QQ.com</P>
            </div>

            <div class="wenzi1">
                <h1><span>Layout design</span></h1>
                <h2>作品介绍</h2>
                <p>这是我们学习版式设计课程时的练习作品，仍需努力。</p>
                <p>This is our practice work in the course of format design. We still need to work hard.</p>
            </div>

            <div class="app">
                <h1><button>APP设计</button></h1>
            </div>

            <div class="appwz">
                <h1><span>App Design</span></h1>
                <h2>作品介绍</h2>
            </div>
            <div class="appjs">
                <p>同游是一个给驴友们提供交流结伴同行的APP。用户可以选择旅游目的地，搜索离自己较近地区有相同意向的驴友，互相了解后来选择是否同行旅游。</p>
            </div>

            <div class="dongtu">
                <img src="动图眼睛.gif">
            </div>

            <div class="zuihou">
                <h1><button>一些手绘</button></h1>
            </div>
            <div class="zuihouwz">
                <p>一些个人的手绘原创和临摹，有待加强，不喜勿喷。</p>
                <p>Some individual hand-painted and original, do not like spray.</p>
            </div>

            <div class="wula">
                <br>
                <a href="https://aidn.jp/mikuwarp/" target="blank" title="惊喜">抓我呀</a>
            </div>


            <div class="texiao">
                <div class="tx1"></div>
            </div>

            <div class="texiao2">
                <div class="tx2"></div>
            </div>

            <div class="pao">
                <img src="走路.gif" alt="">
            </div>


            <div class="zfx"></div>

            <div class="cchu">
                <p>zhao chong xian Design 2020&2500133459@qq.com</p>
            </div>


        </div>


    </div>









</body>

</html>